<template>
  <el-container ref="bigModel" class="main-model">
    <el-header>
      <Header :active-title="1" />
    </el-header>
    <el-main>
      <b-map
        class="testMap"
        v-if="center"
        :height="'-webkit-fill-available'"
        :width="'100%'"
        ref="mapmarkInfoRef"
        :center="center"
        @markerClick="markerHandle"
        @markerClickdetail="markerHandledetail"
      >
      </b-map>
      <img
        v-show="rightModelShow"
        :src="require('@/assets/xd/new/Group 1142813242.png')"
        alt=""
        class="hiddenClass"
        @click="hideRightModel"
      />
      <img
        v-show="!rightModelShow"
        :src="require('@/assets/xd/new/Group 1142813263.png')"
        alt=""
        class="showClass"
        @click="showRightModel"
      />
      <div v-show="rightModelShow" class="home-model-right">
        <div class="infoModel">
          <div class="infoTitle flex-container">
               应用风险统计
            <!-- <el-button type="text" @click="showequipment" class="more">
              更多
            </el-button> -->
          </div>
          <div class="infoContent" :style="{ height: infoHeight + 'px' }">
              <home2 />
          </div>
        </div>

        <div class="infoModel">
          <!-- <div class="infoTitle flex-container">
            <el-button type="text" @click="showantiLocalization" class="more">
              更多
            </el-button>
          </div> -->
          <dialog6 />
        </div>
        <div class="infoModel">
          <div class="infoTitle flex-container">
            任务执行统计
            <!-- <el-button type="text" @click="showantiLocalization" class="more">
              更多
            </el-button> -->
          </div>
          <div class="infoContent" :style="{ height: infoHeight + 'px' }">
          <TaskStatistics />
          </div>
        </div>
      </div>
      <el-dialog
        class="maindialog"
        title="新建抗定位任务"
        :visible.sync="dialogVisible"
        width="40%"
        z-index="10000"
      >
        <div style="max-height: 60vh; overflow: auto">
          <div class="">
            <el-descriptions title="设备信息">
              <el-descriptions-item label="IP地址">
                202.196.0.55
              </el-descriptions-item>
              <el-descriptions-item label="归属单位" style="width: 50">
                单位1
              </el-descriptions-item>
              <el-descriptions-item label="设备真实地理位置">
                河南省郑州市高新区翠竹路56号
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <!-- 下面部分 -->
          <div class="">
            <el-descriptions title="抗定位配置">
              <el-descriptions-item label="干扰方式">
                <el-radio-group v-model="radioVal" @input="handleRadioChange">
                  <el-radio label="1" selceted> 基于虚假地标的抗定位3 </el-radio>
                  <el-radio label="2"> 基于时延混淆的抗定位3 </el-radio>
                </el-radio-group>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <!-- 虚假web地标信息列表 -->
          <div v-if="radioVal == 1">
            <span>虚假web地标信息列表</span>
            <el-table
              ref="singleTable"
              :data="tableData"
              style="width: 100%; height: 100%"
              @row-click="handleRowClick"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <!-- <el-table-column label="" width="55">
                <template slot-scope="scope">
                  <el-radio
                    v-model="selectedRow"
                    :label="scope.$index + 1"
                    @change="handleSelectionChange(scope.$index + 1, scope.row)"
                  />
                </template>
              </el-table-column> -->
              <el-table-column prop="ip" label="IP地址">
                  <template slot-scope="scope">
                    {{scope.row.ip}}:{{scope.row.port}}
                  </template>
              </el-table-column>
              <!-- 端口设置成可以输入的 -->
              <!-- <el-table-column prop="port" label="端口" /> -->
              <el-table-column
                prop="nominalposition"
                label="虚假地标标称位置"
              />
              <el-table-column prop="protectedAddress" label="受保护目标" />
            </el-table>
          </div>
          <div v-if="radioVal == 2">
            <span>设置回复延迟：</span>
            <el-input
              ref="inputTime"
              v-model="input1"
              placeholder="XX毫秒"
              style="width: 150px"
            />
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: right">
            <el-button type="primary" @click="dialogVisible = false">
              取消
            </el-button>
            <el-button type="primary" @click="showDetails"> 提交 </el-button>
          </div>
        </div>
      </el-dialog>
      <el-dialog
        class="maindialog2"
        :visible.sync="dialogDetails"
        width="30%"
        z-index="10000"
      >
        <template #title>
          <div
            style="
              font-weight: bold;
              font-size: 20px;
              color: #fff;
              text-align: center;
            "
          >
            新建设备抗定位任务
          </div>
        </template>
        <span class="dialogDetailstext"
          >新建设备抗定位任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span
        >
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogDetails = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
// import Header from "@/views/xd/components/Header";
import Header from "@/views/largeScreen/components/header/index.vue";
import dialog8 from "@/views/xd/components/dialog/dialog8.vue";
import pie from "@/views/xd/components/charts/new/home5.vue";
import ListScroll from "@/components/DtSrcollCopy2";
import BMap from "./components/bmap.vue";
import home2 from "@/views/xd/components/charts/new/home2.vue";
import TaskStatistics from "@/views/xd/components/charts/new/TaskStatistics.vue";
import dialog6 from "@/views/xd/components/dialog/dialog6-1";

export default {
  components: { Header, dialog8, pie, ListScroll, BMap, home2,TaskStatistics,dialog6 },
  data() {
    return {
      center: { lng: 113.5236294428, lat: 34.594339716 },
      rightModelShow: true,
      dialogDetails: false,
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      myChart: {},
      pieData: [
        {
          value: 190,
          name: "风险距离<5KM",
        },
        {
          value: 60,
          name: "20KM<风险距离<30KM",
        },
        {
          value: 70,
          name: "20KM<风险距离",
        },
      ],
      pieName: [],
      infoList: [
        {
          content: "461单位，202.196.0.37，风险距离为3KM",
        },
        {
          content: "552单位，202.196.0.45，风险距离为3KM",
        },
        {
          content: " 832单位，202.196.0.62，风险距离为3KM",
        },
        {
          content: "741单位，202.196.0.65，风险距离为3KM",
        },
        {
          content: "156单位，202.196.0.35，风险距离为7KM",
        },
        {
          content: "552单位，202.196.0.45，风险距离为3KM",
        },
        {
          content: " 832单位，202.196.0.62，风险距离为3KM",
        },
      ],
      infoList2: [
        {
          content: "202.196.0.48 位置保护任务已执行完成",
        },
        {
          content: "202.196.0.45 位置保护任务已完成70%",
        },
        {
          content: "202.196.0.42 位置保护任务已完成60%",
        },
        {
          content: "202.196.0.96 位置保护任务已完成50%",
        },
        {
          content: "202.196.0.47 位置保护任务已完成40%",
        },
        {
          content: "202.196.0.12 位置保护任务已完成30%",
        },
        {
          content: "202.196.0.42 位置保护任务已完成60%",
        },
        {
          content: "202.196.0.96 位置保护任务已完成50%",
        },
        {
          content: "202.196.0.47 位置保护任务已完成40%",
        },
        {
          content: "202.196.0.12 位置保护任务已完成30%",
        },
        {
          content: "202.196.0.42 位置保护任务已完成60%",
        },
        {
          content: "202.196.0.96 位置保护任务已完成50%",
        },
        {
          content: "202.196.0.47 位置保护任务已完成40%",
        },
        {
          content: "202.196.0.12 位置保护任务已完成30%",
        },
        {
          content: "202.196.0.42 位置保护任务已完成60%",
        },
        {
          content: "202.196.0.96 位置保护任务已完成50%",
        },
      ],
      tableData2: [
        {
          ip: "202.196.0.12",
          nominalposition: "河南农业大学",
          layoutposition: "河南大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.19",
          nominalposition: "华北水利水电大学",
          layoutposition: "浙江交通大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.78",
          nominalposition: "河南牧业经济学院",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.11",
          nominalposition: "河南职业技术学院",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.65",
          nominalposition: "河南警察学院",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.56",
          nominalposition: "河南财经政法大学",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
      ],
      infoHeight: 300,

      scrollTop: 0,
      // 弹窗数据
      input: "设置回复延迟",
      input1: "",
      radioVal: "2",
      selectedRow: null, // 用于存储当前选中的行的索引
      dialogVisible2: false,
      dialogVisible: false,
      tableData: [
        {
          ip: "202.196.0.32",
          nominalposition: "河南农业大学",
          port: "80",
          layoutposition: "河南大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.35",
          nominalposition: "华北水利水电大学",
          port: "80",
          layoutposition: "浙江交通大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.45",
          nominalposition: "河南牧业经济学院",
          port: "80",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.23",
          port: "80",
          nominalposition: "河南职业技术学院",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.52",
          port: "80",
          nominalposition: "河南警察学院",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
        {
          ip: "202.196.0.65",
          port: "80",
          nominalposition: "河南财经政法大学",
          layoutposition: "清华大学",
          protectedAddress: "郑州轻工业大学",
        },
      ],
      multipleSelection: []
    };
  },
  async mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    this.id = this.$route.query.id;
    this.$nextTick(() => {
      this.$refs.mapmarkInfoRef.setData({
        points: [
          {
            lng: "112.5236294428",
            lat: "34.794339716211",
            color: "red",
            params: {
              name: "发现新风险",
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              id: 1,
              userid: "26365",
              username: "张某某",
              locationPos: "河南省郑州市高新区",
              locationBasis: "文本定位",
              locationLat: "34.594339716",
              locationLon: "113.5236294428",
              locationLeak: "家庭地址",
              province: "河南",
              city: "郑州",
              warnState: "0",
              distance: "2.1KM",
              danwei: "单位1",
              real: "(33.6246，126.3656)河南省郑州市高新区翠竹路56号",
              blogId: 253659896,
              zdyh:'130645512',
              yymc:'和聊',
              fxnr:'位置信息越汉访问',
              yybh:'000125',
              dqzt:'已提醒',
              sjxh:'Galaxy S21 Ultra',
              czxt:'Android13'
            },
          },
          {
            lng: "113.62362944286338",
            lat: "34.394339716",
            color: "blue",
            params: {
              name: "用户已处理",
              createBy: null,
              createTime: null,
              updateBy: null,
              updateTime: null,
              remark: null,
              id: 1,
              userid: "26365",
              username: "张某某",
              locationPos: "河南省郑州市高新区",
              locationBasis: "文本定位",
              locationLat: "34.594339716",
              locationLon: "113.5236294428",
              locationLeak: "家庭地址",
              province: "河南",
              city: "郑州",
              warnState: "0",
              distance: "12.1KM",
              danwei: "单位2",
              real: "(34.1456，135.4566)河南省郑州市管城回族区英协路5号",
              blogId: 253659896,
              radius:150000,
              radiusFlag:true,
              zdyh:'admin',
              yymc:'应用宝',
              fxnr:'越汉访问短信信息',
              yybh:'000246',
              dqzt:'用户已删除该应用',
              sjxh:'Galaxy S21 Ultra',
              czxt:'Android13'
            },
          },
        ],
      });
    });
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    closeFn() {
      this.markerInfoShow = false;
    },
    markerHandle(data) {
      console.log("地图返回的数据", data);
      this.dialogVisible = true;
    },
    markerHandledetail(data) {
      this.$router.push("/networkestimate");
    },
    showDetails() {
      this.dialogVisible = false;
      this.dialogDetails = true;
    },
    show() {
      this.$emit("showDialog");
    },
    handleRadioChange(value) {
      if (value == 2) {
        this.$refs.inputTime.focus();
      }
    },
    showD() {
      this.dialogVisible = true;
    },
    tonetworkestimate() {
      this.$router.push("/networkestimate");
    },
    showequipment() {
      this.$router.push("/networkEquipment/equipment");
    },
    showantiLocalization() {
      this.$router.push("/networkEquipment/antiLocalization");
    },
    hideRightModel() {
      this.rightModelShow = false;
    },
    showRightModel() {
      this.rightModelShow = true;
    },
    onSubmit() {},

    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        this.pieName[i] = this.pieData[i].name;
      }
    },
    handleRowClick(row, column, event) {
      console.log(row, column, event);
    },
    // handleSelectionChange(index, row) {
    //   console.log(row);
    //   this.selectedRow = index;
    // },
  },
};
</script>
<style lang="scss" scoped>
.home-model-right {
  width: 400px;
  position: absolute;
  right: 10px;
  z-index: 100;

  .infoContent {
    padding-top: 48px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .infoModel {
    position: relative;

    .infoTitle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-size: 100% 80%;
      background-repeat: no-repeat;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 48px;
      box-sizing: border-box;
    }
  }
}

.home-model-left {
  position: relative;
  height: 100%;
}

.home-model {
  position: relative;
  width: 100%;
  height: 100%;
}

.body {
  font-size: 18px;
  position: absolute;
  top: 60px;
  right: 10px;
  padding: 8px;
  color: #90cee9;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.Dialog1 {
  position: absolute;
  left: 100px;
  top: 200px;
  width: 420px;
  height: 250px;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  line-height: 1px;
  text-align: left;
  font-style: normal;
  text-align: center;
  font-weight: bold;
}

.Tc {
  position: absolute;
  bottom: 10px;
  right: 30px;
  width: 400px;
  height: 300px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.scroll-div {
  margin-top: 10px;
  overflow: hidden;
  animation: scroll 1s linear infinite;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 18px;
}

.home-model-right .infoModel .infoTitle {
  z-index: 1;
}

.infoList {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.scroll-div {
  position: absolute;
  width: 100%;
  bottom: -1px;
  margin-top: 10px;
  overflow: hidden;
  border-top-left-radius: 30px;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

.zindexModel {
  position: absolute;
  background-color: #153968a6;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.testMap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
}

.hiddenClass {
  height: 100%;
  position: absolute;
  right: 400px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 100;
}

.showClass {
  height: 100%;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 100;
}

::v-deep .tc {
  right: 30%;
}
.el-table {
  min-height: auto !important;
  &::before {
    height: 0px;
  }
}
.dialogDetailstext {
    font-size: 18px;
    font-weight: bolder;
    color: #fff;
}
</style>
